<template>
    <el-dialog title="打印学生住宿信息" :visible.sync="printVis" width="650px" append-to-body>
        <div class="printInfo" id="printInfo">
            <p class="bigTitle">西安思源学院 <br>住宿通知单</p>

            <div class="houseName">
                <div class="lf">
                    <span class="text-line" style="width: 120px;">{{ printData.houseName }}</span>
                </div>
                <div class="rt">签名：
                    <span class="text-line" style="width: 120px;display: inline-block;"> &nbsp;</span>
                </div>
                <div class="clear"></div>
            </div>

            <div class="info-text">
                <span style="margin-left: 40px;display: inline-block;">
                    请分配
                </span>
                <span class="text-line" style="width: 200px;">{{ printData.studentName }}（{{ printData.studentNo }}）</span>
                同学，性别
                <span class="text-line" style="width: 47px;">{{ printData.sex == 1 ? '女' : '男' }} </span>，
                <span class="text-line" style="width: 100px;">{{ printData.ofStudent}} </span>，
                <span style="width: 97%;" class="text-line">{{ printData.college }}{{ printData.className }}</span>，
                住
                <span class="text-line" style="width: 47px;">{{ printData.roomNo }}</span>
                房间，床位
                <span class="text-line" style="width: 47px;">{{ printData.bedNo }} </span>，
                公寓保证金已缴，请安排。
            </div>
            <div style="text-align: right;">{{ time.y }}年{{ time.m }}月{{ time.d }}日</div>
        </div>

        <div style="text-align: right;padding: 0 20px;">
            <el-button v-print="printObj" type="success">
                打印
            </el-button>
        </div>
    </el-dialog>
</template>

<script>

export default {
    data() {
        return {
            printObj: {
                id: "printInfo",    // 这里是要打印元素的ID
                popTitle: '',  // 打印的标题
                extraCss: '',  // 打印可引入外部的一个 css 文件
                extraHead: ''  // 打印头部文字
            },
            printVis: false,
            printData: {},
            time: {}
        };
    },
    computed: {

    },

    async mounted() {

    },
    methods: {
        open(rowData) {
            console.log(rowData)
            this.printData = rowData
            this.printVis = true
            this.nowTime()
        },
        print() {
            let print = document.getElementsByClassName("printInfo")[0]  //获取目标区域的HTML结构
            document.body.innerHTML = print.innerHTML   //替换网页的html内容
            window.print()   //打印
            window.location.reload()  //刷新页面，因为网页的html被替换后很丑
        },
        nowTime() {
            const date = new Date()
            this.time = {
                y: date.getFullYear(),
                m: date.getMonth() + 1,
                d: date.getDate(),
            }

        }
    },
    components: {

    },
};
</script>

<style scoped>
.text-line {
    /* text-decoration: underline; */
    /* text-underline-offset: 3px; */
    text-align: left;
    /* display: inline-block; */
    display: inline-block;
    border-bottom: 1px solid rgba(96, 98, 102);
    padding-left: 5px;
    /* text-align: center; */
}

.printInfo {
    font-size: 16px;
    line-height: 40px;
    padding: 0 3%;
    font-family: '宋体';
}

.bigTitle {
    font-size: 20px;
    text-align: center;
    line-height: 25px;
    font-weight: 600;
}

.lf {
    float: left;
}

.rt {
    float: right;
}

.clear {
    clear: both;
}

.info-text {
    /* text-indent: 2rem; */
    
}

@page {
    size: auto;
    /* auto is the initial value */
    margin: 3mm;
    /* this affects the margin in the printer settings */
}

html {
    background-color: #FFFFFF;
    margin: 0;
    /* this affects the margin on the html before sending to printer */
}

body {
    border: solid 1px blue;
    margin: 10mm 15mm 10mm 15mm;
    /* margin you want for the content */
}
</style>
<style></style>